<!DOCTYPE html>

<html lang="it">

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Eventi Jesolo 2013 - Movimento Giovanile Salesiano</title>

        <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../css/base.css" />
        <link rel="stylesheet" href="../js/swiper/idangerous.swiper.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="../js/swiper/idangerous.swiper-1.7.min.js"></script>
        <script type="text/javascript" src="../js/fitvids/jquery.fitvids.min.js"></script>
        <script>
            $(document).ready(function(){
               $('.swiper-container').swiper({speed: 750, autoPlay:6000, loop: true});
                $(".videos").fitVids();
            });
        </script>
    </head>

    <body>
        <!-- Page Layout HTML here -->
        <nav>
            <div class="container">
                <div class="row">
                    <div class="span12">
                        <ul>
                            <li><a href="#"><img src="../img/home.png" /><span class="hidden-tablet hidden-phone">Home</span></a></li>
                            <li><a href="#"><img src="../img/article.png" /><span class="hidden-tablet hidden-phone">Articoli</span></a></li>
                            <li><a href="#"><img src="../img/stuffs.png" /><span class="hidden-tablet hidden-phone">Materiali</span></a></li>
                            <li><a href="#"><img src="../img/photos.png" /><span class="hidden-tablet hidden-phone">Foto</span></a></li>
                            <li><a href="#"><img src="../img/workshop.png" /><span class="hidden-tablet hidden-phone">Workshop</span></a></li>
                            <li class="right no-border"><a href="http://www.donboscoland.it" class="donboscoland social" target="blank"><img src="../img/donboscoland.png" class="no-margin hidden-phone" /><img src="../img/mgs.png" class="no-margin hidden-tablet hidden-desktop" /></a></li>
                            <li class="right no-border hidden-phone"><a href="http://www.youtube.com/user/donboscoland" class="social"><img src="../img/youtube.png" class="no-margin" /></a></li>
                            <li class="right no-border hidden-phone"><a href="http://twitter.com/#!/donboscoland" class="social"><img src="../img/twitter.png" class="no-margin" /></a></li>
                            <li class="right no-border hidden-phone"><a href="http://www.facebook.com/pages/donboscolandit/135282683238513" class="social"><img src="../img/facebook.png" class="no-margin" /></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container" id="header">
            <div class="row">
                <div class="span12">
                    <img src="../img/joy-faith.png" />
                </div>
            </div>
            <div class="row" id="slider">
                <div class="span12">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <h1>The Sun: i Testimoni della FdG 2013</h1>
                                <img src="../images/the-sun.png" />
                                
                            </div>
                            <div class="swiper-slide">
                                <img src="http://placehold.it/1170x300" />
                            </div>
                            <div class="swiper-slide">
                                <img src="http://placehold.it/1170x300" />
                            </div>
                            <div class="swiper-slide">
                                <img src="http://placehold.it/1170x300" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section id="content">
            <div class="container">
                <div class="row">
                    <div class="span5" id="news">
                        <h1>NEWS</h1>
                        <div class="wrapper">
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="img-polaroid" src="http://www.placehold.it/100x100" />
                                </a>
                                <div class="media-body">
                                    <h3>Titolo di News</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id ligula ut odio venenatis ultricies. Nam ac eros id orci tristique accumsan id vel dui. Morbi vel mauris felis, a ultrices justo. Integer in mi et dui imperdiet viverra in sed mauris. Ut nec lorem et leo condimentum lobortis. Proin.</p>
                                </div>
                            </div>
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="img-polaroid" src="http://www.placehold.it/100x100" />
                                </a>
                                <div class="media-body">
                                    <h3>Titolo di News</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id ligula ut odio venenatis ultricies. Nam ac eros id orci tristique accumsan id vel dui. Morbi vel mauris felis, a ultrices justo. Integer in mi et dui imperdiet viverra in sed mauris. Ut nec lorem et leo condimentum lobortis. Proin.</p>
                                </div>
                            </div>
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="img-polaroid" src="http://www.placehold.it/100x100" />
                                </a>
                                <div class="media-body">
                                    <h3>Titolo di News</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id ligula ut odio venenatis ultricies. Nam ac eros id orci tristique accumsan id vel dui. Morbi vel mauris felis, a ultrices justo. Integer in mi et dui imperdiet viverra in sed mauris. Ut nec lorem et leo condimentum lobortis. Proin.</p>
                                </div>
                            </div>
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="img-polaroid" src="http://www.placehold.it/100x100" />
                                </a>
                                <div class="media-body">
                                    <h3>Titolo di News</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id ligula ut odio venenatis ultricies. Nam ac eros id orci tristique accumsan id vel dui. Morbi vel mauris felis, a ultrices justo. Integer in mi et dui imperdiet viverra in sed mauris. Ut nec lorem et leo condimentum lobortis. Proin.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="span4" id="video">
                        <h1>VIDEO</h1>
                        <div class="videos">
                            <ul class="unstyled">
                                <li><iframe width="560" height="315" src="http://www.youtube.com/embed/7yeFP_OPrVg?rel=0" frameborder="0" allowfullscreen></iframe></li>
                                <li><iframe width="560" height="315" src="http://www.youtube.com/embed/Mh38c8AJL9o?rel=0" frameborder="0" allowfullscreen></iframe></li>
                                <li><iframe width="560" height="315" src="http://www.youtube.com/embed/gLroAetZ-EM" frameborder="0" allowfullscreen></iframe></li>
                            </ul>
                        </div>
                    </div>
                    <div class="span3" id="workshop">
                        <h1>WORKSHOP</h1>
                        <img src="http://placehold.it/270x500" />
                    </div>
                </div>
            </div>
        </section>
        <section id="patrocini">
            <div class="container">
                <div class="row">
                    <div class="span12">
                        <img src="../img/patrocini_provincia_venezia.png" />
                        <img src="../img/patrocini_citta_jesolo.png" />
                        <img src="../img/patrocini_regione_friuli_veneziagiulia.png" />
                        <img src="../img/patrocini_trentino_altoadige.png" />
                        <img src="../img/patrocini_jesolo_turismo.png" />
                        <img src="../img/patrocini_palaarrex.png" />
                        <img src="../img/media_partner_telechiara.png" />
                        <img src="../img/anno_fede.png" />
                    </div>
                </div>
            </div>
        </section>
        <footer>
            <div class="container">
                <div class="row">
                    <div class="span3">
                        <h4>Manifestazione</h4>
                        <ul class="unstyled">
                            <li>Programma</li>
                            <li>Organizzazione</li>
                            <li>Iniziative ed Eventi</li>
                            <li>Storia</li>
                            <li>Area Stampa</li>
                        </ul>
                    </div>
                    <div class="span3">
                        <h4>Percorsi</h4>
                        <ul class="unstyled">
                            <li>Mostre</li>
                            <li>Stand</li>
                        </ul>
                    </div>
                    <div class="span3">
                        <h4>Amici</h4>
                        <ul class="unstyled">
                            <li><a href="http://www.db-service.org">DB Service</a></li>
                        </ul>
                    </div>
                    <div class="span3">
                        <h4>Iscrizioni</h4>
                        <ul class="unstyled">
                           
                        </ul>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Initialize JS Plugins -->
        <script src="../bootstrap/js/bootstrap.min.js"></script>
        <script src="../js/retina.js"></script>
    </body>
</html>
